<template>
    <view class="page-wrap">
        <view class="code">
            <view class="qrcode">
                <image :src="qrcode"></image>
            </view>
            <button class="share-button" type="default" open-type="share">
                <view style="display: inline-block;"><u-icon name="share" color="#fff" size="38rpx"></u-icon></view>
                <text class="button-text">分享小程序</text>
            </button>
        </view>
    </view>
</template>

<script>
    import {
        mapState
    } from 'vuex';
    export default {
        data() {
            return {
                qrcode: '',
                scene: '',
                sharePath: 'pages/tabbar/index/index',
            }
        },
        computed: {
            ...mapState(['userInfo', 'appConfig'])
        },
        onLoad() {
            this.$api.user.shareCode({
                page: this.sharePath
            }).then(res => {
                this.qrcode = res.qrcode;
                this.scene = res.scene;
            })
        },
        onShareAppMessage() {
            return {
                title: `${this.manifest.name} - 好友邀请`,
                path: `${this.sharePath}?scene=${this.scene}`,
                imageUrl: this.appConfig.shareImageUrl
            }
        },
        beforeDestroy() {},
        methods: {}
    }
</script>

<style scoped lang="scss">
    .page-wrap {
        min-height: 100vh;
        background: #fff;

        .share-button {
            background: $primary-color ;
            color: #fff;
            width: 400rpx;
            margin: 100rpx auto auto;
        }

        .qrcode {
            margin-top: 100rpx;
            
            image {
                width: 430rpx;
                height: 430rpx;
                display: block;
                margin: auto;
            }
        }
    }
</style>